<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>外边距会重压,以最大的为准</title>
</head>
<body>
    <fieldset>
        <legend>01.外边距会重压,以最大的为准</legend>
        <style>
            #box1{
                width: 500px;
                height: 300px;
                background: red;
                margin-bottom: 30px;
            }
            #box2{
                width: 200px;
                height: 500px;
                background: yellow;
                margin-top: 50px;
            }
        </style>
        <div id="box1">
            box1下边距30px等价于box2上边距30px(外边距会重压,可以f12查看效果)
        </div>
        <div id="box2">
            box1的外边距是30px,
            box2的外边距是50px,
            box1与box2的距离为50px。
            注:外边距会重压，以最大的为准。
        </div>
    </fieldset>

    <fieldset>
        <legend>02.父子级包含的时候,子级的margin会传递给父级</legend>
        <style>
            #boxA{
                width: 500px;
                height: 300px;
                background: red;
            }
            #boxB{
                width: 200px;
                height: 500px;
                background: yellow;
                margin-top: 50px;
            }
        </style>
        <div id="boxA">
            <div id="boxB">
                box1的外边距是30px,
                box2的外边距是50px,
                box1与box2的距离为50px。
                注:外边距会重压，以最大的为准。
                建议不要使用外边距,使用父级的内边距替代子级的外边距
                可以将所有的元素当做盒子，左右的操作都是围绕盒子来做。
            </div>
        </div>
        
    </fieldset>

    <fieldset>
        <legend>03.margin属性的auto值</legend>
        <style>
            #boxC{
                width: 500px;
                height: 300px;
                background: red;
                margin-left: auto;/**可以在看一下margin-right的自动，那如果两者同时使用呢？**/
            }
        </style>
        <div id="boxC"></div>
        
    </fieldset>
</body>
</html>